<template>
  <view v-if="value" class="pay-modal" @click.stop="close">
    <view class="pay-dialog" @click.stop>
      <!-- 顶部标题 -->
      <view class="pay-header">
        <text class="pay-title">选择支付方式</text>
        <view class="pay-amount-wrapper">
          <text class="pay-amount-label">需支付</text>
          <text class="pay-amount">¥{{ vk.pubfn.priceFilter(totalFee) }}</text>
        </view>
      </view>

      <!-- 支付方式列表 -->
      <view class="pay-methods">
        <!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
        <view class="pay-method-item" @click.stop="pay('alipay')">
          <view class="pay-method-icon alipay">
            <text class="icon">&#xf26e;</text>
          </view>
          <view class="pay-method-info">
            <text class="pay-method-name">支付宝</text>
            <text class="pay-method-desc">推荐使用支付宝支付</text>
          </view>
          <view class="pay-method-arrow">
            <text class="icon">&#xf054;</text>
          </view>
        </view>
        <!-- #endif -->

        <!-- #ifdef H5 || APP-PLUS || MP-WEIXIN -->
        <view class="pay-method-item" @click.stop="pay('wxpay')">
          <view class="pay-method-icon wechat">
            <text class="icon">&#xf1d7;</text>
          </view>
          <view class="pay-method-info">
            <text class="pay-method-name">微信支付</text>
            <text class="pay-method-desc">使用微信快捷支付</text>
          </view>
          <view class="pay-method-arrow">
            <text class="icon">&#xf054;</text>
          </view>
        </view>
        <!-- #endif -->
      </view>

      <!-- 取消按钮 -->
      <view class="pay-actions" v-if="cancelBtn">
        <button class="pay-cancel-btn" @click="close">
          <text>{{ cancelText }}</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "pay-action-sheet",
  emits: ["update:modelValue", "input", "click", "close"],
  props: {
    // 通过双向绑定控制组件的弹出与收起
    value: {
      type: Boolean,
      default: false,
    },
    // 底部的取消按钮
    cancelBtn: {
      type: Boolean,
      default: true,
    },
    // 取消按钮的文字提示
    cancelText: {
      type: String,
      default: "取消",
    },
    // 支付金额
    totalFee: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {};
  },
  watch: {
    value(newVal) {
      console.log("💳 支付弹窗显示状态:", newVal);
    },
  },
  methods: {
    // 点击取消按钮
    close() {
      console.log("💳 关闭支付弹窗");
      this.$emit("input", false);
      this.$emit("update:modelValue", false);
      this.$emit("close");
    },
    pay(payType) {
      console.log("💳 选择支付方式:", payType);
      this.$emit("click", payType);
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

/* 支付弹窗 */
.pay-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s;
}

.pay-dialog {
  width: 600rpx;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 30rpx;
  padding: 50rpx 40rpx 40rpx;
  border: 1rpx solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s;
}

/* 顶部标题 */
.pay-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.pay-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 30rpx;
}

.pay-amount-wrapper {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16rpx;
}

.pay-amount-label {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.6);
}

.pay-amount {
  font-size: 48rpx;
  font-weight: bold;
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 支付方式列表 */
.pay-methods {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20rpx;
  padding: 20rpx 0;
  margin-bottom: 30rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.05);
}

.pay-method-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  transition: all 0.3s;
  position: relative;
}

.pay-method-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 20rpx;
  background: rgba(139, 92, 246, 0.1);
  transform: translate(-50%, -50%);
  transition: all 0.3s;
}

.pay-method-item:active::before {
  width: 95%;
  height: 90%;
}

.pay-method-item + .pay-method-item {
  border-top: 1rpx solid rgba(255, 255, 255, 0.05);
}

.pay-method-icon {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  position: relative;
  z-index: 1;
}

.pay-method-icon.alipay {
  background: linear-gradient(135deg, #1677ff 0%, #1890ff 100%);
  box-shadow: 0 8rpx 16rpx rgba(22, 119, 255, 0.3);
}

.pay-method-icon.wechat {
  background: linear-gradient(135deg, #07c160 0%, #09bb07 100%);
  box-shadow: 0 8rpx 16rpx rgba(7, 193, 96, 0.3);
}

.pay-method-icon .icon {
  font-family: FontAwesome;
  font-size: 44rpx;
  color: #fff;
}

.pay-method-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  position: relative;
  z-index: 1;
}

.pay-method-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #fff;
}

.pay-method-desc {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.5);
}

.pay-method-arrow {
  position: relative;
  z-index: 1;
}

.pay-method-arrow .icon {
  font-family: FontAwesome;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.3);
}

/* 取消按钮 */
.pay-actions {
  display: flex;
  justify-content: center;
}

.pay-cancel-btn {
  width: 100%;
  height: 90rpx;
  background: rgba(255, 255, 255, 0.08);
  border: 1rpx solid rgba(255, 255, 255, 0.1);
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s;
}

.pay-cancel-btn:active {
  background: rgba(255, 255, 255, 0.15);
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100rpx);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
